<div class="docoment-container"
  #container
  id="main-document" fxLayout="row">
  <div class="announcement" fxLayout="row" fxLayoutAlign="start center"
    *ngIf="profile.room.announcementText">
    <mat-icon>volume_up</mat-icon>
    <marquee behavior="scroll" width="100%" direction="left">{{profile.room.announcementText}}</marquee>
  </div>
  <div style="width: 220px;" fxFlexAlign="stretch"
    fxLayout="column" fxLayoutAlign="center center"
    *ngIf="isViewList">
      <perfect-scrollbar #scrollbar class="scroller" wheel-propagation="true" wheel-speed="10"
        [ngStyle]="{'max-height.px': maxHeight}"
        min-scrollbar-length="20">
        <div *ngFor="let page of selectedPages; let i = index"
          fxLayout="column" fxLayoutAlign="center center">
          <img [class.img-selected]="(i+1) ===selectedPage"
            (click)="selectedPage = (i+1)"
            (dblclick)="selectPage(i+1)"
            [src]="getPagePath(i+1)"/>
          <div>{{i+1}}</div>
        </div>
      </perfect-scrollbar>
  </div>

  <div fxFlex fxFlexAlign="stretch"
    fxLayout="column" fxLayoutAlign="center center"
    style="height: 100%">
    <perfect-scrollbar class="scroller" wheel-propagation="true" wheel-speed="10"
      [ngStyle]="{'max-height.px': maxHeight}"
      fxLayout="column" fxLayoutAlign="center center"
      min-scrollbar-length="20">
      <canvas class="mat-elevation-z12" #can id="can"></canvas>
    </perfect-scrollbar>
  </div>
</div>
